Skip to main content

Development Environment Setup

Alright, so you want to do some development - Awesome! You're in the right place.

0. Enable Virtualisation in your BIOS​

In order to setup an emulator you need to have enabled Intel or AMD's respective virtualisation support in the BIOS. It is disabled by default on most systems. You can find specific instructions on how to do this by searching "enable virtualisation via bios on x laptop/CPU" or you can follow RedHat's general instructions here as a rough guide, if you're comfortable navigating your BIOS.

1. IDE​

Install Visual Studio Code.

3. Install Android Studio​

Installing android studio is not for the purposes of using it for app development, it's simply to use its android emulator functionality. It's a flavor of Intellij for App development in Kotlin/Java, we're using Javascript via React Native so we don't need the heavy Android Studio Editor for our development needs.

Once you have it installed create an empty project, as for some reason android studio requires you do this to access the AVD Manager -- the only tool from android studio we actually need. It stands for the Android Virtual Device Manager and lets you run Android in an emulator via qEMU.

Once you have the blank app open, close it again immediately. File >> Close Project

You should be greeted with a menu like this:

Go to the top right of this menu where the kebab menu is and click it. You should get a dialogue which includes the AVD Manager and SDK Manager

We're going to start with the SDK Manager. Open it and match your checked boxes with mine:

This will require you to accept all sorts of agreements and download a lot of libraries and the emulator itself.

Now we can go back to the kebab menu and open the AVD Manager

You should be greeted with a menu like this (I already have some created) Go ahead and click create device. Use whatever virtual device you want, it doesn't matter. I usually use the pixel options

Next you have to select the system image, this is effectively the version of android your emulator will run. This needs to be downloaded (quite large) I usually use the latest release version which is currently Android S. You will need to click the blue hyperlink download next to your desired image before it will let you select it.

Next setup details about the device, these are the ones I suggest, which make it start in landscape mode (app is developed for landscape mode) and disables the device frame which just wastes monitor real estate.

Now click finish and you have a virtual phone!

Click the play button in the menu to start it up.

We won't need to do this every time, Expo can start the emulator for us once we have it installed. It'll always open the last emulator you had open though, so if you want to switch the emulator in use you will have to use the AVD Manager again.

2. Install Node.js​

While the app isn't written in Node.js a lot of the tooling for the app is, so you will need to install Nodejs which you can do here: https://nodejs.org/en/download/

The latest LTS should work just fine.

Let's move on now that we have the bulk of the downloading done.

3. Install Yarn​

Yarn is a third-party package manager for Node.js which mao-app uses (although the other projects still use NPM still, which comes bundled with node.js)

Follow their guide here (you can skip the project creation steps as you're joining an existing project.)

2. Clone repository​

Using the VSCode Interface you can clone phonlab-tcd/mao-app directly. It will prompt you to login, which you must do as the mao-app repository is currently private.

3. Intall Dependencies​

Now you have cloned the repository and have it open in visual studio code you now need to install the javascript packages the app depends on such as expo, redux, and the hundreds of other packages/transitive dependencies.

yarn install

This may take a while.

4. Launch Expo !​

Almost ready to run the app! Now you can start expo which will compile the app and bundle it.

Type

npx expo start

In the root of the project and you'll be greeted with a QR code which you can use to scan the app onto your phone (if you have EXPO GO installed on your phone) But mainly I would recommend using the emulator which you can open by typing 'a' into the terminal (no need to press enter, it captures it automatically) It should open the emulator and install expo go for you (will take some time)

Once it's done it should open Expo Go and launch the app. This will give you a login screen.

5. Creating a development account​

This may need updating in the near future, as the account system is currently an early implementation

Go to the backoffice's account editor here: https://backoffice.abair.ie/accounts and click the red plus next to "Text Accounts"

Now fill in a set of test credentials, it doesn't need to be a real email, just a valid one. And whatever password you want. This backoffice is configured to modify the development environment, not the production environment. It uses all the same security mechanisms as production, though.

6. Login to the app​

Now you're logged in to the app and ready to code! Go forth and use all that React/React native you've learned!

Notes / Tips​

  • The backoffice uses NPM still, so install its dependencies by using npm i rather than yarn install
  • Make sure always to have your supabase configured to the development supabase environment (currently default, won't be in the near future)
  • Don't put passwords or secrets in the git repository, they're stored for all of time, even if you remove them in a later commit.
  • If you're developing with one monitor on windows you might fight Windows PowerToys useful, which includes a tool which lets you toggle a window to be "always" on top allowing you to place your emulator on top of your IDE in the corner without it disappearing every time you click back into your ID.

If you feel this guide wasn't sufficient, you got stuck, ran into an issue or feel like something is missing, reach out to a developer who's already onboarded (e.g. Rían)